layui.use(['form','layer','table','element','qsform'], function(){
    let $ = layui.jquery,
        table = layui.table,
        form = layui.form,
        element = layui.element,
        qsform = layui.qsform;

    // 列表
    var tableIns = table.render({
        elem: '#tableList',
        url : '../../pictures/',
        method:'GET',
        cellMinWidth : 95,
        page : true,
        height : 'full-125',
        limit : 10,	// 注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        limits : [10,15,20,25],	// 分页选择
        id : 'listTable',
        cols : [[
            {type: 'checkbox', fixed:'left', width:50},
            {field: 'pictureName', title: '文件名称', width:350},
            {field: 'isPublic', title: '是否公开', align:'center', templet: function(d){
                    return '<input type="checkbox" name="status" lay-filter="isPublic" '
                        +'lay-skin="switch" lay-text="公开|隐藏" '+(d.isPublic==1?"checked":"")
                        +' qs-id='+d.id+'>';
                }},
            {field: 'status', title: '状态', align:'center', templet: function(d){
                    return '<input type="checkbox" name="status" lay-filter="dataStatus" '
                        +'lay-skin="switch" lay-text="正常|失效" '+(d.status==1?"checked":"")
                        +' qs-id='+d.id+'>';
                }},
            {title: '操作', width:200, templet:'#listBar',fixed:'right',align:'center'}
        ]]
    });

    // 添加角色
    $(".add_btn").click(function(){
        operateRowData();
    });

    // 列表操作
    table.on('tool(tableList)', function(obj){
        var layEvent = obj.event,
            data = obj.data;
        if(layEvent === 'edit'){ // 编辑
            operateRowData(data);
        } else if(layEvent === 'del'){ // 删除
            layer.confirm('确定删除此文章？',{icon:3, title:'提示信息'},function(index){
                $.ajax({
                    url : "../../pictures/"+data.id,
                    type : "DELETE",
                    success : function(data) {
                        tableIns.reload();
                        layer.close(index);
                    }
                });
            });
        } else if(layEvent === 'look'){ // 预览
            layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问")
        }
    });

    // 角色的操作（新增、修改）
    function operateRowData(obj){
        var index = layui.layer.open({
            title : obj ? "编辑照片" : "添加照片",
            type : 2,
            content : "pictureAU.html",
            success : function(layero, index){
                var body = layui.layer.getChildFrame('body', index);
                if(obj){
                    body.find(".upload_picture").hide();
                    body.find(".view_picture").show();
                    qsform.setDataByQsName(body, obj);
                    setElementUrl(body);
                    form.render();
                }else{
                    // 控制上传图片还是显示图片
                    body.find(".upload_picture").show();
                    body.find(".view_picture").hide();
                }
            }
        });
        layui.layer.full(index);
        // 改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
        $(window).on("resize",function(){
            layui.layer.full(index);
        })
    }

    // 检索功能
    $(".search_btn").on("click",function(){
        table.reload("tableTable",{
            page: {
                curr: 1 // 重新从第1页开始
            },
            where: {
                title: $(".searchVal").val()  // 搜索关键字
            }
        })
    });

    /**
     * 设置元素的地址属性
     */
    function setElementUrl(body){
        let id = body.find(".uuid").val();
        let path = getAnnexPath(id);
        body.find("#view_picture_img").attr("src", path);
    }

    /**
     * 获取附件的真实地址
     * @param fkId
     */
    function getAnnexPath(fkId){
        let address = "";
        $.ajax({
            // 几个参数需要注意一下
            type : "GET",// 方法类型
            async: false,
            url : "../../annex/fkUuid/address/" + fkId, // url
            success : function(data) {
                address = data;
            },
            error : function(data) {
                console.log(result);
                layer.msg("获取附件访问地址失败", {
                    time:3000
                });
                return false;
            }
        });
        return address;
    }
});